<div class="uk-container ">
    <div class="dux-cart">
        <div class="dux-box">
            <div class="box-header">收货信息</div>
            <div class="box-body" data-address>


                <div id="address-info" class="add-info uk-flex {$addInfo ? '' : 'uk-hidden'}">
                    <div class="info-left uk-flex-1">
                        <ul class="uk-list">
                            <li>收货人：<span data-name>{$addInfo.name}</span></li>
                            <li>联系方式：<span data-tel>{$addInfo.tel}</span></li>
                            <li>收货地址：<span data-province>{$addInfo.province}</span><span
                                    data-city>{$addInfo.city}</span><span data-region>{$addInfo.region}</span><span
                                    data-address>{$addInfo.address}</span></li>
                        </ul>
                    </div>
                    <div class="info-right uk-text-center uk-padding-remove">
                        <div class="uk-margin-small-bottom uk-margin-top"><a data-switch href="javascript:;">地址切换</a>
                        </div>
                        <div>
                            <a class="uk-button uk-button-primary" data-add href="javascript:;">新建地址</a>
                        </div>
                    </div>
                </div>

                <form id="address-add" class="uk-form add-info {$addInfo ? 'uk-hidden' : ''}">
                    <div class="uk-flex">
                        <div class="uk-flex-1">
                            <div class="info-left">
                                <div class="uk-form-group">
                                    <div class="uk-form-controls">
                                        <div class="uk-grid uk-child-width-expand">
                                            <div><input type="text" class="uk-form-field" name="name"
                                                        placeholder="收件人姓名"></div>
                                            <div><input type="text" class="uk-form-field" name="tel"
                                                        placeholder="收件人电话"></div>
                                        </div>
                                    </div>
                                </div>
                                <div class="uk-form-group">
                                    <div class="uk-form-controls" data-dux="form-location">
                                        <div class="uk-grid uk-child-width-expand">
                                            <div>
                                                <select name="province" data-province></select>
                                            </div>
                                            <div>
                                                <select name="city" data-city></select>
                                            </div>
                                            <div>
                                                <select name="region" data-district></select>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="uk-form-group">
                                    <div class="uk-form-controls">
                                        <textarea class="uk-textarea" name="address" placeholder="请填写街道门牌号码"></textarea>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="info-right">
                            <div class="uk-form-group">
                                <div class="uk-form-controls">
                                    <input type="checkbox" checked value="1" name="default"> 设为默认
                                </div>
                            </div>
                            <div class="uk-form-group">
                                <div class="uk-form-controls">
                                    <div class="uk-grid uk-grid-small uk-child-width-expand">
                                        <div>
                                            <button class="uk-button uk-button-primary uk-button-block" data-submit
                                                    type="button">保存地址
                                            </button>
                                        </div>
                                        <div>
                                            <button class="uk-button uk-button-default uk-button-block" data-close
                                                    type="button">取消
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
        <br>
        <form action="{url('', $urlParams)}" data-dux="form-bind" method="post" data-callback="submit"
              data-advanced="false">
            <input name="add_id" type="hidden" value="0">
            <table class="cart-header dux-table uk-table  uk-table-responsive  uk-table-divider uk-table-hover uk-table-middle">
                <thead>
                <tr>
                    <th width="100">图片</th>
                    <th>商品</th>
                    <th width="130" class="uk-text-center">单价</th>
                    <th class="uk-text-center" width="130">数量</th>
                    <th width="130" class="uk-text-center">小计</th>
                </tr>
                </thead>
            </table>

            <!--loop{$cartData as $k => $data}-->
            <div cart-item>
                <table class="cart-table dux-table uk-table  uk-table-responsive  uk-table-divider uk-table-hover uk-table-middle">
                    <thead>
                    <tr>
                        <th class="cart-store" colspan="5">
                            <a href="__ROOT__/">{$site.info_name}</a>
                        </th>
                    </tr>
                    </thead>
                    <tbody>
                    <!--loop{$data.items as $key => $vo}-->
                    <tr>
                        <td width="100" class="uk-text-middle dux-page-goods">
                            <a href="{$vo.url}" target="_blank"><img src="{$vo.image}" alt="{$vo.name}" width="64"
                                                                     height="64"></a>
                        </td>
                        <td class="uk-text-middle dux-page-goods">
                            <div class="title"><a href="{$vo.url}" target="_blank">{$vo.name}</a></div>
                            <!--if{!empty($vo.options)}-->
                            <div class="uk-text-grey">
                                <!--loop{$vo.options as $v}-->
                                {$v.name}：{$v.value}
                                <!--{/loop}-->
                            </div>
                            <!--{/if}-->
                        </td>
                        <td width="130" class="uk-text-center uk-text-middle">
                            <div class="uk-text-danger">
                                {price_format($vo.price)} 元
                            </div>
                        </td>
                        <td width="130" class="uk-text-center uk-text-middle">
                            {$vo.qty}
                        </td>
                        <td width="130" class="uk-text-center uk-text-middle">
                            <div>{price_format($vo.total)} 元
                            </div>
                        </td>
                    </tr>
                    <!--{/loop}-->
                    </tbody>
                </table>
                <div class="table-foot">

                    <div class="foot-item">
                        <div class="title">买家留言：</div>
                        <div class="body">
                            <input class="uk-input uk-width-medium" type="text" name="remark" placeholder="买家留言">
                        </div>
                    </div>

                    <!--if{$data.invoice_status}-->
                    <div class="foot-item">
                        <div class="title">发票信息：</div>
                        <div class="body">
                            <label data-invoice><input type="checkbox" class="uk-checkbox"> 我要开发票</label>
                            <span data-invoice-info class="dux-text-disabled">

                    </span>
                            <span data-invoice-data>
                        <input data-field="invoice" name="invoice[{$k}]" type="hidden">
                        <input data-field="invoice_type" name="invoice_type[{$k}]" type="hidden">
                        <input data-field="invoice_class" name="invoice_class[{$k}]" type="hidden">
                        <input data-field="invoice_name" name="invoice_name[{$k}]" type="hidden">
                        <input data-field="invoice_label" name="invoice_label[{$k}]" type="hidden">
                    </span>
                        </div>
                    </div>
                    <!--{/if}-->


                    <!--if{$orderConfig.cod_status}-->
                    <div class="foot-item">
                        <div class="title">付款方式：</div>
                        <div class="body">
                            <div class="uk-grid">
                                <label><input name="cod_status[{$k}]" value="0" type="radio" class="uk-radio" checked>
                                    在线支付</label>
                                <label><input name="cod_status[{$k}]" value="1" type="radio" class="uk-radio">
                                    货到付款</label>
                            </div>
                        </div>
                    </div>
                    <!--{/if}-->

                    <div class="foot-item">
                        <div class="title">配送服务：</div>
                        <div class="body">
                    <span data-delivery-info>
                    <span class="uk-margin-right">快递配送</span><span class="uk-margin-right">{$data.delivery_price ? $data.delivery_price.'运费' : '免运费'}</span>
                    </span>
                            <a class="uk-link" href="javascript:;" data-delivery="{$data.delivery_price}">修改</a>
                            <input data-delivery-data name="take_id[{$k}]" type="hidden">
                        </div>
                    </div>

                    <div class="foot-item">
                        <div class="uk-flex">
                            <div class="uk-flex-1">
                                <div class="title">可用优惠券：</div>
                                <div class="body">
                                    <ul class="dux-select-list uk-clearfix">
                                        <!--if{empty($data.coupon)}-->
                                        <li>
                                            <label>
                                                <div class="title title-1">
                                                    暂无可用优惠券
                                                </div>
                                            </label>
                                        </li>
                                        <!--{else}-->

                                        <li>
                                            <label>
                                                <input checked type="radio" data-coupon name="coupon_id[{$k}]" value="0" class="uk-hidden" data-money="0">
                                                <div class="title title-1">
                                                    不使用优惠券

                                                </div>
                                            </label>
                                        </li>
                                        <!--{/if}-->
                                        <!--loop{$data.coupon as $vo}-->
                                        <li>
                                            <label>
                                                <input type="radio" data-coupon name="coupon_id[{$k}]" value="{$vo.log_id}" class="uk-hidden" data-money="{$vo.money}">
                                                <div class="title">
                                                    <p class="uk-text-truncate uk-text-primary">{$vo.name}</p>
                                                    <p>满{$vo.meet_money}减{$vo.money}</p>
                                                </div>
                                            </label>
                                        </li>
                                        <!--{/loop}-->
                                    </ul>
                                </div>
                            </div>
                            <div>
                                <div class="dux-info-list uk-width-medium">
                                    <dl>
                                        <dt>商品合计</dt>
                                        <dd><span data-order-price="{$data.order_price}">￥{$data.order_price}</span>
                                        </dd>
                                    </dl>
                                    <dl>
                                        <dt>运费</dt>
                                        <dd><span
                                                data-delivery-price="{$data.delivery_price}">￥{$data.delivery_price}</span>
                                        </dd>
                                    </dl>
                                    <dl>
                                        <dt>优惠</dt>
                                        <dd><span data-discounts-price="0">￥0</span></dd>
                                    </dl>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
            <!--{/loop}-->

            <br>

            <div class="table-foot">
                <div class="foot-item">
                    <div class="body uk-clearfix">

                        <div class="uk-float-right">
                            <div class="uk-text-right">
                                <div class="dux-info-list uk-width-medium">
                                    <dl>
                                        <dt style="padding-top: 5px;">应付总额</dt>
                                        <dd><span class="uk-text-large uk-text-danger" data-total="{$orderPrice}">￥{$totalPrice}</span>
                                        </dd>
                                    </dl>
                                    <!--loop{$currencyAppend as $vo}-->
                                    <dl>
                                        <dt>{$vo.name}</dt>
                                        <dd>{$vo.money}</dd>
                                    </dl>
                                    <!--{/loop}-->
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!--if{$currencyExchange}-->
                <div class="foot-item">
                    <div class="title">使用以下支付将抵扣部分消费：</div>
                    <div class="body">
                        <ul class="dux-select-list uk-clearfix">
                            <!--loop{$currencyExchange as $vo}-->
                            <li>
                                <label>
                                    <div class="title">
                                        <p class=" uk-text-primary">{$vo.name}</p>
                                        <p>
                                            {$vo.money}{$vo.unit} 抵 {$vo.deduct}元
                                        </p>

                                    </div>
                                </label>
                            </li>
                            <!--{/loop}-->
                        </ul>
                    </div>
                </div>
                <!--{/if}-->

                <div class="foot-item uk-text-right">
                    <button type="submit" class="uk-button uk-button-danger">结算订单</button>
                </div>
            </div>


        </form>
    </div>
</div>
<div id="tpl-list" uk-modal>
    <div class="uk-modal-dialog">
        <button class="uk-modal-close-default" type="button" uk-close></button>
        <div class="uk-modal-header">
            <h2 class="uk-modal-title">地址选择</h2>
        </div>
        <div class="uk-modal-body">
            <ul class="uk-list" data-addressList>

            </ul>

        </div>
    </div>
</div>

<div id="tpl-invoice" uk-modal>
    <div class="uk-modal-dialog">
        <button class="uk-modal-close-default" type="button" uk-close></button>
        <div class="uk-modal-header">
            <h2 class="uk-modal-title">发票信息</h2>
        </div>
        <form class="uk-form uk-form-horizontal">
            <div class="uk-modal-body">
                <div class="uk-form-group">
                    <label class="uk-form-label uk-width-small">发票类型</label>
                    <div class="uk-form-controls uk-form-controls-text">
                        <div class="uk-grid">
                            <label><input type="radio" name="invoice" class="uk-radio" value="1" checked> 纸质发票</label>
                        </div>
                    </div>
                </div>
                <div class="uk-form-group">
                    <label class="uk-form-label uk-width-small">发票抬头</label>
                    <div class="uk-form-controls uk-form-controls-text">
                        <ul class="uk-subnav uk-subnav-pill" uk-switcher>
                            <li data-type="0"><a href="javascript:;">个人</a></li>
                            <li data-type="1"><a href="javascript:;">单位</a></li>
                        </ul>
                        <ul class="uk-switcher uk-margin-top">
                            <li>
                                <input type="text" class="uk-form-field" placeholder="请输入个人姓名"
                                       name="personal_invoice_name" value="">
                            </li>
                            <li>
                                <div class="uk-margin-small-bottom">
                                    <input type="text" class="uk-form-field" placeholder="请输入单位名称" name="invoice_name"
                                           value="">
                                </div>
                                <div>
                                    <input type="text" class="uk-form-field" placeholder="请输入纳税人识别号"
                                           name="invoice_label" value="">
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="uk-form-group">
                    <label class="uk-form-label uk-width-small">发票内容</label>
                    <div class="uk-form-controls">
                        <select name="invoice_class">
                            <!--loop{$invoiceClass as $vo}-->
                            <option value="{$vo.class_id}">{$vo.name}</option>
                            <!--{/loop}-->
                        </select>
                    </div>
                </div>
            </div>
            <div class="uk-modal-footer uk-text-right">
                <button class="uk-button uk-button-default uk-modal-close" type="button">取消</button>
                <button class="uk-button uk-button-primary" type="button" data-submit>保存</button>
            </div>
        </form>
    </div>
</div>

<div id="delivery-list" uk-modal>
    <div class="uk-modal-dialog">
        <button class="uk-modal-close-default" type="button" uk-close></button>
        <div class="uk-modal-header">
            <h2 class="uk-modal-title">配送方式</h2>
        </div>
        <div class="uk-modal-body">
            <ul class="uk-list" data-deliveryList>

            </ul>

        </div>
    </div>
</div>

<!--#include file="common_footer.html"-->

<script>
    window.submit = function (msg, url) {
        window.location.href = url;
    };
    var addSaveUrl = '{url("order/Address/saveAddress")}', addListUrl = '{url("order/Address/listAddress")}',
        takeUrl = '{url("order/Cart/take")}';
    //js-compress
    var addData = {}, takeData = {};
    var invoiceEl;
    var deliveryEl;
    Do('base', 'tpl', function () {
        //地址管理
        var setAddress = function (data) {
            $('input[name="add_id"]').val(data.add_id);
            for (var key in data) {
                $('#address-info').find('[data-' + key + ']').text(data[key]);
            }
            infoSwitch();
        };
        var addSwitch = function () {
            $('#address-add').removeClass('uk-hidden');
            $('#address-info').addClass('uk-hidden');
        };
        var infoSwitch = function () {
            $('#address-add').addClass('uk-hidden');
            $('#address-info').removeClass('uk-hidden');
            $('#address-add')[0].reset();
        };

        $('[data-address]').on('click', '[data-add]', function () {
            addSwitch();
        });
        $('[data-address]').on('click', '[data-close]', function () {
            infoSwitch();
        });
        $('[data-address]').on('click', '[data-submit]', function () {
            app.ajax({
                url: addSaveUrl,
                data: $('#address-add').serialize(),
                type: 'post',
                success: function (data) {
                    setAddress(data);
                }
            });
        });
        $('[data-address]').on('click', '[data-switch]', function () {
            app.ajax({
                url: addListUrl,
                success: function (data) {
                    addData = {};
                    var html = '';
                    for (var i in data.pageList) {
                        addData[data.pageList[i].add_id] = data.pageList[i];
                        html += '<li><a href="javascript:;" data-id="' + data.pageList[i].add_id + '" class="uk-display-block dux-box dux-padding"><p>收货人:  ' + data.pageList[i].name + '</p><p>联系方式：' + data.pageList[i].tel + '</p><p>收货地址：' + data.pageList[i].province + data.pageList[i].city + data.pageList[i].region + data.pageList[i].address + '</p></a></li>';
                    }
                    $('[data-addressList]').html(html);
                    UIkit.modal('#tpl-list').show();

                }
            });
        });
        $('[data-addressList]').on('click', 'a', function () {
            setAddress(addData[$(this).data('id')]);
            UIkit.modal('#tpl-list').hide();
        });
        //发票管理
        $('[data-invoice]').on('change', 'input', function () {
            if ($(this).is(":checked")) {
                $(this).prop("checked", false);
                UIkit.modal('#tpl-invoice').show();
                invoiceEl = $(this).parents('div');
            } else {
                invoiceEl.find('[data-invoice-info]').html('');
                invoiceEl.find('[data-invoice-data]').find('input').val('');

            }
        });
        $('[data-invoice-info]').on('click', 'a', function () {
            UIkit.modal('#tpl-invoice').show();
        });
        $('#tpl-invoice').on('click', '[data-submit]', function () {
            var form = $(this).parents('form');
            var formData = form.serializeArray();
            var data = {};
            data['invoice_type'] = form.find('[data-type].uk-active').data('type');
            for (var i in formData) {
                data[formData[i].name] = formData[i].value;
            }
            if (!data.invoice_type) {
                data['invoice_name'] = data.personal_invoice_name;
                data['invoice_label'] = '';
            } else {
                if (!data['invoice_label']) {
                    app.error('请填写纳税人识别码');
                    return;
                }
            }
            if (!data['invoice_name']) {
                app.error('请填写发票抬头');
                return;
            }
            if (!data['invoice_class']) {
                app.error('请选择发票内容');
                return;
            }
            data['invoice_class_name'] = form.find('select[name="invoice_class"]').find('option:selected').text();

            var dataEl = invoiceEl.find('[data-invoice-data]');
            for (var x in data) {
                dataEl.find('[data-field="' + x + '"]').val(data[x]);
            }

            var html = [];
            html.push('<span class="uk-margin-left">发票类型：纸质发票</span>');
            html.push('<span class="uk-margin-left">发票抬头：' + data.invoice_name + '</span>');
            if (data.invoice_label) {
                html.push('<span class="uk-margin-left">纳税人识别号：' + data.invoice_label + '</span>');
            }
            html.push('<span class="uk-margin-left">发票内容：' + data.invoice_class_name + '</span>');
            html.push('<a class="uk-link uk-margin-left" data-invoice>修改</a>');

            invoiceEl.find('[data-invoice-info]').html(html.join(''));
            invoiceEl.find('[data-invoice] input').prop('checked', true);
            UIkit.modal('#tpl-invoice').hide();

        });
        //配送服务
        $('[data-delivery]').on('click', function () {
            var price = $(this).data('delivery');
            deliveryEl = $(this).parents('div');
            app.ajax({
                url: takeUrl,
                data: {
                    add_id: $('input[name="add_id"]').val()
                },
                success: function (data) {
                    takeData = {};
                    takeData[0] = {name: '快递配送', price: price};
                    var html = '<li><a href="javascript:;" data-id="0" class="uk-display-block dux-box dux-padding"><p>配送方式:  快递配送</p><p>运费价格：' + (price ? price : '免运费') + '</p></a></li>';
                    for (var i in data.takeList) {
                        takeData[data.takeList[i].take_id] = {
                            name: '商品自提',
                            price: 0,
                            info: data.takeList[i].name,
                            address: data.takeList[i].province + data.takeList[i].city + data.takeList[i].region + data.takeList[i].address
                        };
                        html += '<li><a href="javascript:;" data-id="' + data.takeList[i].take_id + '" class="uk-display-block dux-box dux-padding"><p>配送方式: 自提</p><p>自提点：' + data.takeList[i].name + '</p><p>地址：' + data.takeList[i].province + data.takeList[i].city + data.takeList[i].region + data.takeList[i].address + '</p></a></li>';
                    }
                    $('[data-deliveryList]').html(html);
                    UIkit.modal('#delivery-list').show();
                }
            });
        });
        $('[data-deliveryList]').on('click', 'a', function () {
            var id = $(this).data('id');
            var info = takeData[id];
            var item = deliveryEl.parents('[cart-item]');
            var html = [];
            html.push('<span class="uk-margin-right">' + info.name + '</span>');
            html.push('<span class="uk-margin-right">' + (info.price ? info.price : '免运费') + '</span>');
            if (id) {
                html.push('<span class="uk-margin-right">' + info.info + '</span>');
                html.push('<span class="uk-margin-right">' + info.address + '</span>');
            }
            deliveryEl.find('[data-delivery-info]').html(html.join(''));
            deliveryEl.find('[data-delivery-data]').val(id);

            item.find('[data-delivery-price]').text('￥' + info.price);
            item.find('[data-delivery-price]').data('deliverPrice', info.price);
            totalPrice();
            UIkit.modal('#delivery-list').hide();
        });
        //优惠券
        $('[data-coupon]').on('change', function () {
            var item = $(this).parents('[cart-item]');
            var money = $(this).data('money');
            item.find('[data-discounts-price]').text('￥' + money);
            item.find('[data-discounts-price]').data('discountsPrice', money);
            totalPrice();
        });

        var totalPrice = function () {
            var orderPrice = 0;
            var discountsPrice = 0;
            var deliveryPrice = 0;
            $('[data-order-price]').each(function () {
                orderPrice += parseFloat($(this).data('orderPrice'));
            });
            $('[data-discounts-price]').each(function () {
                discountsPrice += parseFloat($(this).data('discountsPrice'));
            });
            $('[data-delivery-price]').each(function () {
                deliveryPrice += parseFloat($(this).data('deliveryPrice'));
            });
            $('[data-total-discounts]').text((discountsPrice ? '-' : '') + '￥' + discountsPrice.toFixed(2));
            $('[data-total-delivery]').text((deliveryPrice ? '+' : '') + '￥' + deliveryPrice.toFixed(2));
            $('[data-total]').text('￥' + (orderPrice + deliveryPrice - discountsPrice).toFixed(2));
        };
    });


    //js-end
</script>
